草庐IT

前端 PM

全部标签

前端测试:单元测试

为什么进行测试你是否有以下烦恼:当你加班加点完成一个功能后,提交给测试部,立马返回几个bug当你修改完bug后,并检查了好几遍,确保无误后,提交给测试部,有返回几个bug……对于以上情境,你是否有过疑问,为什么检查都没问题了还是出现bug?以上这些都是因为没有做好测试。你可能会问,做了呀,都检查好几遍了。的确,你是测试了,但是你并没有完成测试的闭环。你可能完成测试的一部分,其他的部分并没有完成。既然你说我没完成测试,那何为测试,又怎么进行测试?什么是测试?对于前端来说,测试主要是对HTML、CSS、JavaScript进行测试,以确保代码的正常运行。常见的测试有单元测试、集成测试、端到端(e2

前端发送请求获取后端文件,并且前端实现下载文件功能

最近遇到一个需求,就是前端发送post请求获取后端的excel文件,并且前端实现下载导出到本地的功能。前端页面就长上面那样,一个批量导出功能,用户勾选之后,前端通过接口把id和其他的参数传给后端,接口调用方法这里需要注意的是,这里必须设置responseType:‘blob’,后端返回来一个文件流,然后前端通过封装的方法实现下载导出,前端导出方法如下:这里前端通过blobDownloads实现下载:前端需要引入这个jsimportlocalDownloadUtilfrom"@/utils/localDownloadUtil.js";然后我们看看这个js里封装了两个下载方法,一种是iframe下

前端控制台报错is not defined

背景:前端控制台报错isnotdefined的bug,在一个页面渲染的模板里,多个接口都使用了同一个模板,但是接口返回的参数是不同的。有些接口返回了这个参数,另一些接口可能压根就没有这个参数。这个时候进行页面渲染,调用了那个不存在的参数,就报了isnotdefined的错。Isnotdefined是程序上的错,因为没有声明这个变量就使用了它导致的报错。解决方法:面对这种情况,不能提前声明、防止重复声明,普通的判空方法会报错,又必须要进行判空。这时候使用typeofXX!=‘undefined’&&XX进行判空处理,第一个是判断是否定义,第二个是判断空值。那么undefinedinstanceo

webSocket前端+webSocket封装

一、websocket基础classMyWebScoket{constructor(socketUrl){//super(socketUrl);this.onopenFn=nullthis.oncloseFn=nullthis.onmessageFn=nullthis.onerrorFn=nullthis.socketUrl=socketUrlthis.socket=nullthis.init()}init(){letself=thislettimeStep=newDate().getTime();self.socket=newWebSocket(self.socketUrl+timeStep

工作后,前端工作难在哪里?

活多、位卑、责任重大家不了解前端这些年前端技术方面的大幅变化,普遍觉得前端就是切图仔,技术含量不高,复杂的业务逻辑都放在后端。但是,在快节奏的社会中,前端作为用户最直接接触的东西,做到精致、吸引人眼球很重要,为了更好地展示,各种千奇百怪的插件你都要了解,还有很多细节你要去重复的调整,用户,产品经理还有可能会要“做些微调”。各种设备界面大小不一,不同浏览器的展示也不同,兼容性也是一个需要花时间处理的东西。除了界面,还需要和后端对接实现业务逻辑。前端沟通了UI,后端逻辑,功能的设计,所以项目上线,一旦出了大问题,首先都会暴露在界面上,用户立刻就能发现,事故等级也不低,所以前端开发的上线压力大。任务

前端实现文件下载的方法;以及后端返回 blob 文件流,进行展示。

前端下载一般分为两种情况,一种是后端直接给一个文件地址,通过浏览器打开就可以下载,另外一种则需要发送请求,后端返回二进制流数据,前端解析流数据,生成URL,实现下载。1.a标签:通过a标签的download属性来实现文件下载,这种方式是最简单的,也是比较常用的方式,先来看示例代码:ahref="http://www.baidu.com"download="baidu.html">下载/a>通过上面这个示例,我们发现点击下载,是跳转到了百度的首页,而并没有真的下载文件。因为a标签下载只能下载同源的文件,如果是跨域的文件,这里包括图片、音视频等媒体文件,都是预览,也无法下载。上面的代码是直接通过书

【HTML】【一文全解Canvas】从初学到实战,彻底掌握前端绘图神器!

【HTML】Canvas基本介绍与应用前言一、Canvas概述二、基本用法常用的CanvasAPI1.获取上下文:使用`getContext('2d')`获取上下文对象,在该对象上进行图形绘制和变换。2.绘制形状:3.图片操作:4.变换操作:5.渐变和样式:三、Canvas绘制图形1、绘制矩形a.fillRect()b.strokeRect()c.clearRect()2、绘制圆形a.绘制实心圆形b.绘制空心圆形3、绘制路径a.画笑脸b.绘制两个三角形,一个是填充的,一个是描边的四、Canvas绘制文本1、fillText()2、strokeText()五、Canvas绘制图片1、drawIm

前端实现下载文件的各种方式

前端涉及到的文件下载还是很多应用场景的,那么前端文件下载有多少种方式呢?每种方式有什么优缺点呢?下面就来一一介绍。1.a标签通过a标签的download属性来实现文件下载,这种方式是最简单的,也是我们比较常用的方式,先来看示例代码:下载就上面的这个示例,我们点击下载,发现是跳转到了百度的首页,并没有真的下载文件。因为a标签下载只能下载同源的文件,如果是跨域的文件,这里包括图片、音视频等媒体文件,都是预览,也无法下载。上面的代码是直接通过书写a标签来实现文件下载,我们也可以通过js来实现,代码如下:const a = document.createElement('a')a.href = 'ht

前端实现视频播放功能----vue-video-player --save

步骤一:npm安装插件:npminstallvue-video-player--save如果报错安装具体版本如下所示:npminstall--savevue-video-player@4.0.6 如果package.json文件内显示则为安装成功步骤二:局部引入---这里因为只有一个页面需要所有采用的局部引入在需要的页面引入(这里注意路径不要写错了)  步骤三:在页面中使用组件 步骤四:data中写入所传的参数  步骤五:methods写入回调函数 步骤六:注意(组件一定要设宽高)添加组件样式 这样就完成了一个视频播放功能 可以快进可以回放可以全屏拖动滚动条视频结束后自动重播完成实例:完整代码